<script setup>
import Son1com from '@/components/Son1Com.vue'
import Son2com from '@/components/Son2Com.vue'
import { useCounterStore } from '@/store/counter.js'
import { useChannelStore } from '@/store/channel.js'
import { storeToRefs } from 'pinia';
 
const counterStore = useCounterStore()
// console.log(counterStore);
const channelStore = useChannelStore()

// 此时，直接结构，不处理，数据会丢失响应式
const { count, msg } = storeToRefs(counterStore)
const { channelList } = storeToRefs(channelStore)
const { getList } = channelStore

</script>

<template>
  <div>App.vue根组件 
    - {{ count }}
    - {{ msg }}
  </div>
  <Son1com></Son1com>
  <Son2com></Son2com>
  <hr>
  <button @click="getList">获取频道数据</button>

  <ul>
    <li v-for="item in channelList" :key="item.id">{{ item.name }}</li>
  </ul>


</template>

<style scoped>

</style>
``